﻿<!DOCTYPE html>
<html>
  <head>
    <title>Checkout Management 2</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <link href="HotelManagementOS/resources/css/axure_rp_page.css" type="text/css" rel="stylesheet"/>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link href="HotelManagementOS/data/styles.css" type="text/css" rel="stylesheet"/>
    <link href="HotelManagementOS/files/checkout_management_2/styles.css" type="text/css" rel="stylesheet"/>
    <script src="HotelManagementOS/resources/scripts/jquery-3.2.1.min.js"></script>
    <script src="HotelManagementOS/resources/scripts/axure/axQuery.js"></script>
    <script src="HotelManagementOS/resources/scripts/axure/globals.js"></script>
    <script src="HotelManagementOS/resources/scripts/axutils.js"></script>
    <script src="HotelManagementOS/resources/scripts/axure/annotation.js"></script>
    <script src="HotelManagementOS/resources/scripts/axure/axQuery.std.js"></script>
    <script src="HotelManagementOS/resources/scripts/axure/doc.js"></script>
    <script src="HotelManagementOS/resources/scripts/messagecenter.js"></script>
    <script src="HotelManagementOS/resources/scripts/axure/events.js"></script>
    <script src="HotelManagementOS/resources/scripts/axure/recording.js"></script>
    <script src="HotelManagementOS/resources/scripts/axure/action.js"></script>
    <script src="HotelManagementOS/resources/scripts/axure/expr.js"></script>
    <script src="HotelManagementOS/resources/scripts/axure/geometry.js"></script>
    <script src="HotelManagementOS/resources/scripts/axure/flyout.js"></script>
    <script src="HotelManagementOS/resources/scripts/axure/model.js"></script>
    <script src="HotelManagementOS/resources/scripts/axure/repeater.js"></script>
    <script src="HotelManagementOS/resources/scripts/axure/sto.js"></script>
    <script src="HotelManagementOS/resources/scripts/axure/utils.temp.js"></script>
    <script src="HotelManagementOS/resources/scripts/axure/variables.js"></script>
    <script src="HotelManagementOS/resources/scripts/axure/drag.js"></script>
    <script src="HotelManagementOS/resources/scripts/axure/move.js"></script>
    <script src="HotelManagementOS/resources/scripts/axure/visibility.js"></script>
    <script src="HotelManagementOS/resources/scripts/axure/style.js"></script>
    <script src="HotelManagementOS/resources/scripts/axure/adaptive.js"></script>
    <script src="HotelManagementOS/resources/scripts/axure/tree.js"></script>
    <script src="HotelManagementOS/resources/scripts/axure/init.temp.js"></script>
    <script src="HotelManagementOS/resources/scripts/axure/legacy.js"></script>
    <script src="HotelManagementOS/resources/scripts/axure/viewer.js"></script>
    <script src="HotelManagementOS/resources/scripts/axure/math.js"></script>
    <script src="HotelManagementOS/resources/scripts/axure/jquery.nicescroll.min.js"></script>
    <script src="HotelManagementOS/data/document.js"></script>
    <script src="HotelManagementOS/files/checkout_management_2/data.js"></script>
    <script type="text/javascript">
      $axure.utils.getTransparentGifPath = function() { return 'resources/images/transparent.gif'; };
      $axure.utils.getOtherPath = function() { return 'resources/Other.html'; };
      $axure.utils.getReloadPath = function() { return 'resources/reload.html'; };
    </script>
  </head>
  <body>
    <div id="base" class="">

      <!-- Unnamed (矩形) -->
      <div id="u445" class="ax_default box_1">
        <div id="u445_div" class=""></div>
        <div id="u445_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>

      <!-- 酒店管理系统（标题） (矩形) -->
      <div id="u446" class="ax_default box_3" data-label="酒店管理系统（标题）">
        <div id="u446_div" class=""></div>
        <div id="u446_text" class="text ">
          <p><span>酒店管理系统</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u447" class="ax_default box_3">
        <div id="u447_div" class=""></div>
        <div id="u447_text" class="text " style="display:none; visibility: hidden">
          <p></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u448" class="ax_default _形状">
        <div id="u448_div" class=""></div>
        <div id="u448_text" class="text ">
          <p><span>&nbsp;&nbsp; &nbsp;&nbsp; 欢迎&nbsp; &nbsp; ▼</span></p>
        </div>
      </div>

      <!-- 下拉菜单 (动态面板) -->
      <div id="u449" class="ax_default ax_default_hidden" data-label="下拉菜单" style="display:none; visibility: hidden">
        <div id="u449_state0" class="panel_state" data-label="State1" style="">
          <div id="u449_state0_content" class="panel_state_content">

            <!-- Unnamed (矩形) -->
            <div id="u450" class="ax_default box_1">
              <div id="u450_div" class=""></div>
              <div id="u450_text" class="text ">
                <p><span>个人中心</span></p>
              </div>
            </div>

            <!-- Unnamed (矩形) -->
            <div id="u451" class="ax_default box_1">
              <div id="u451_div" class=""></div>
              <div id="u451_text" class="text ">
                <p><span>退出登录</span></p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u452" class="ax_default box_1">
        <div id="u452_div" class=""></div>
        <div id="u452_text" class="text ">
          <p><span>用户管理</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u453" class="ax_default box_1">
        <div id="u453_div" class=""></div>
        <div id="u453_text" class="text ">
          <p><span>回到首页</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u454" class="ax_default box_1">
        <div id="u454_div" class=""></div>
        <div id="u454_text" class="text ">
          <p><span>房客管理 ▼</span></p><p><span><br></span></p>
        </div>
      </div>

      <!-- 房客管理功能 (动态面板) -->
      <div id="u455" class="ax_default ax_default_hidden" data-label="房客管理功能" style="display:none; visibility: hidden">
        <div id="u455_state0" class="panel_state" data-label="State1" style="">
          <div id="u455_state0_content" class="panel_state_content">

            <!-- Unnamed (矩形) -->
            <div id="u456" class="ax_default box_1">
              <div id="u456_div" class=""></div>
              <div id="u456_text" class="text ">
                <p><span>预定管理</span></p>
              </div>
            </div>

            <!-- Unnamed (矩形) -->
            <div id="u457" class="ax_default box_1">
              <div id="u457_div" class=""></div>
              <div id="u457_text" class="text ">
                <p><span>入住登记管理</span></p>
              </div>
            </div>

            <!-- Unnamed (矩形) -->
            <div id="u458" class="ax_default box_1">
              <div id="u458_div" class=""></div>
              <div id="u458_text" class="text ">
                <p><span>预定转入住</span></p>
              </div>
            </div>

            <!-- Unnamed (矩形) -->
            <div id="u459" class="ax_default box_1">
              <div id="u459_div" class=""></div>
              <div id="u459_text" class="text ">
                <p><span>结账管理</span></p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u460" class="ax_default box_1">
        <div id="u460_div" class=""></div>
        <div id="u460_text" class="text ">
          <p><span>退出登录</span></p>
        </div>
      </div>

    </div>

    <div style="position:absolute;left: 200px;top: 80px;width: 1200px;">
      <button class="layui-btn layui-btn-sm layui-btn-primary"id="new_btn">新建</button>
      <button class="layui-btn layui-btn-sm layui-btn-primary"id="select">查询</button>
      <table id="checkout" lay-filter="tb_event">

      </table>
    </div>



    <script src="hotel1/resources/scripts/axure/ios.js"></script>
    <script src="resources/scripts/axure/ios.js"></script>
  </body>
  <script src="layui/layui.js"></script>
  <script type="text/html" id="number">
    {{d.LAY_INDEX }}
  </script>
  <script type="text/html" id="mytool">
    <div class="layui-btn-group">
      <button class="layui-btn layui-btn-sm layui-btn-normal"
              lay-event="edit">编辑</button>
      <button class="layui-btn layui-btn-sm layui-btn-danger"
              lay-event="delete">删除</button>
    </div>
  </script>

  <script>
    var $;
    var myReload;
    layui.use(['layer','table','jquery'],function(){
      var table = layui.table;
      $ = layui.jquery;
      var  layer = layui.layer;

      //表格的渲染
      table.render({
        elem:"#checkout",  //渲染表格的id
        url:"getCheckOutByPage",//后台数据的请求接口
        cols:[[
          {field:'index',title:"序号",width:80,templet:"#number"},
          {field:'checkInNum',title: "入住号",width:80},
          {field:'roomNum',title:"房间号",width:80},
          {field:'roomPrice',title:"房间价格",width:100},
          {field:'telephone',title:"手机号",width:80},
          {field: 'deposit',title: "押金",width: 80},
          {field: 'livingDaysNum',title: "居住日期",width: 100},
          {field: 'roomTotalPrice',title: "住房消费",width: 100},
          {field: 'expense',title: "其他消费",width: 100},
          {field: 'totalPrice',title: "总价",width:80},
          {field: 'refundedDeposit',title:"应退押金",width: 100},
          {field: 'payWay',title:"支付方式",width: 100},
          {field: 'change',title:"找零",width: 80},
          {field: 'operatorId',title:"操作人员",width: 100},
          {field: 'paid',title:"付款",width: 80},
          {title:"操作",toolbar:"#mytool",width:120}
        ]],
        even:true, //斑马线背景色
        page:true //开启分页组件
      });

      //表格重载  刷新表格用
      myReload = function reloadTable(){
        table.reload('checkout',{page:{curr:1}})
      }

      //工具栏的响应事件
      //tb_event对应18行
      table.on('tool(tb_event)',function (obj) {
        var data = obj.data;
        //edit对应33行
        if(obj.event=='edit'){
          //弹出对话框层
          layer.open({
            type:2,
            area:['400px','300px'],
            fixed:false,  //是否固定
            content:'editcheckout.jsp',
            success:function (layero,index) {
              //往对话框传值
              var body = layer.getChildFrame('body',index);
              body.find("#checkInNum").val(data.checkInNum);
              body.find("#roomNum").val(data.roomNum);
              body.find("#roomPrice").val(data.roomPrice);
              body.find("#telephone").val(data.telephone);
              body.find("#deposit").val(data.deposit);
              body.find("#livingDaysNum").val(data.livingDaysNum);
              body.find("#roomTotalPrice").val(data.roomTotalPrice);
              body.find("#expense").val(data.expense);
              body.find("#totalPrice").val(data.totalPrice);
              body.find("#refundedDeposit").val(data.refundedDeposit);
              body.find("#payWay").val(data.payWay);
              body.find("#change").val(data.change);
              body.find("#operatorId").val(data.operatorId);
              body.find("#paid").val(data.paid);
            }
          });
        }else if(obj.event=='delete'){

          $.ajax({
            url:"delCheckOut",//请求的后台接口
            type:"post",
            data:{checkInNum:data.checkInNum},
            dataType:"json",
            success:function (param) {
              if(param.code==0){
                //删除成功
                alert(param.msg);
                myReload();
              }else{
                alert(param.msg);
              }
            },
            error:function(){
              alert("操作失败，请稍后重试");
            }
          });
        }
      })

      $("#new_btn").on('click',function () {
        //弹出对话框层
        layer.open({
          type:2,
          area:['400px','300px'],
          fixed:false,
          content:'addcheckout.jsp',
          success:function (layero,index) {

          }
        });
      });

    });

    function updateCheckOut(checkInNum,roomNum,roomPrice,telephone,deposit,livingDaysNum,roomTotalPrice,expense,totalPrice,refundedDeposit,payWay,change,operatorId,paid) {
      $.ajax({
        url:"updateCheckOut",//请求的后台接口
        type:"post",
        data:{checkInNum:checkInNum,roomNum:roomNum,roomPrice:roomPrice,telephone:telephone,deposit:deposit,livingDaysNum:livingDaysNum,roomTotalPrice:roomTotalPrice,expense:expense,totalPrice:totalPrice,refundedDeposit:refundedDeposit,payWay:payWay,change:change,operatorId:operatorId,paid:paid},
        dataType:"json",
        success:function (param) {
          if(param.code==0){
            //修改成功
            alert(param.msg);
            myReload();
          }else{
            alert(param.msg);
          }
        },
        error:function(){
          alert("操作失败，请稍后重试");
        }
      });
    }

    function addCheckOut(checkInNum,roomNum,roomPrice,telephone,deposit,livingDaysNum,roomTotalPrice,expense,totalPrice,refundedDeposit,payWay,change,operatorId,paid) {
      $.ajax({
        url:"addCheckOut",//请求的后台接口
        type:"post",
        data:{checkInNum:checkInNum,roomNum:roomNum,roomPrice:roomPrice,telephone:telephone,deposit:deposit,livingDaysNum:livingDaysNum,roomTotalPrice:roomTotalPrice,expense:expense,totalPrice:totalPrice,refundedDeposit:refundedDeposit,payWay:payWay,change:change,operatorId:operatorId,paid:paid},
        dataType:"json",
        success:function (param) {
          if(param.code==0){
            //修改成功
            alert(param.msg);
            myReload();
          }else{
            alert(param.msg);
          }
        },
        error:function(){
          alert("操作失败，请稍后重试");
        }
      });
    }
  </script>
</html>


